/* 
  目标: 将事件处理函数进行优化，封装
  步骤：
    1.给表单元素设置name属性，
    2.调用setState时，通过对象名称插值技术来更新：{ [name]: 值}
    3.给绑定value属性的表单元素，使用同一个事件处理函数

    
    4.根据e.target.type 是否为checkbox，来决定使用value或者checked属性来更新
    5.可以考虑把条件语句改造成三元运算符
*/
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    username: 'zs',
    desc: '法外狂徒',
    city: '2',
    isSingle: false,
  };

  handleChange = (e) => {
    // 通过对象名称的插值技术来解决
    // 2.调用setState时，通过对象名称插值技术来更新：{ [name]: 值}

    // 如果type为checkbox，则更新e.target.checked，否则，更新e.target.value
    const { type, checked, value, name } = e.target;

    this.setState({ [name]: type === 'checkbox' ? checked : value });
    // if (type === 'checkbox') {
    //   this.setState({ [name]: checked });
    // } else {
    //   this.setState({ [name]: value });
    // }
  };

  render() {
    return (
      <div>
        姓名：
        {/* 1.给表单元素设置name属性， */}
        {/* 3.给绑定value属性的表单元素，使用同一个事件处理函数 */}
        <input type="text" name="username" value={this.state.username} onChange={this.handleChange} />
        <br />
        描述：<textarea name="desc" value={this.state.desc} onChange={this.handleChange}></textarea>
        <br />
        城市：
        <select name="city" value={this.state.city} onChange={this.handleChange}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身：
        <input type="checkbox" name="isSingle" checked={this.state.isSingle} onChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
